<template>
	<div id="allCategory" class="allCategory">
		<div class="categoryMenu" id="categoryMenu">
			<ul class="categoryMenu-list">
				<li class="categoryMenu-list-block" v-for="item in allCategory" v-bind:class="{'active':item.active}" @click="getCategoryItems(item.id)">
					<ul>
						<li><img :src="item.icon"></li>
						<li class="r9">{{item.name}}</li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="categoryCon" id="categoryCon">
			<span v-for="item in categoryItems" v-bind:class="{'active':item.selected }" @click="addOrDelCart(item)">{{item.name}}</span>
		</div>
		<router-link to="/mall/cart" tag="div" class="cart">
			<i class="num" id="cartNum">{{cartCount}}</i>
			<span class="icon-shopping"></span>
		</router-link>
	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import './allCategory.less'
	
	export default {
		computed: mapGetters({
			allCategory: 'allCategory',
			cartCount: 'cartCount',
			categoryItems: 'categoryItems'
		}),
		methods: {
			...mapActions([
			    'addOrDelCart',
			    'getCategoryItems',
			    'categoryItemAddCart'
			]),
		},
		created (){
			this.$store.dispatch( 'getCarts' );
			this.$store.dispatch( 'getAllCategory' );
			this.$store.dispatch( 'getCategoryItems', '1002' );
		}
	}
</script>




